<template>
  <div>
    <div class="videoManage-content" v-if="videoList.length">
      <el-card
        class="videoManage"
        shadow="never"
        v-for="video in videoList"
        :key="video.id"
      >
        <videoManageCard :video="video" />
      </el-card>
      <el-pagination
        small
        background
        :current-page="page"
        @current-change="pageChange"
        :page-size="limit"
        layout="prev, pager, next"
        :total="userInfo.videos_count"
      >
      </el-pagination>
    </div>
    <div v-else>
      <el-empty description="暂无视频"></el-empty>
    </div>
  </div>
</template>

<script>
import VideoManageCard from '@/components/Video/VideoManageCard'
export default {
  props: {},
  components: {
    VideoManageCard
  },
  data() {
    return {
      limit: 5,
      page: 1,
      // 视频列表
      videoList: [],
      userInfo: {}
    }
  },
  computed: {
    // 获取用户信息
    userinfo() {
      return this.$store.state.user.userInfo
    }
  },
  watch: {
    // userinfo: {
    //   immediate: true,
    //   deep: true,
    //   handler(val) {
    //     console.log('change', val)
    //     this.userInfo = val
    //     if (val) {
    //       // 获取视频列表
    //       this.getVideoList()
    //     }
    //   }
    // }
  },
  created() {},
  mounted() {
    // 等待页面渲染结束后获取数据
    this.$nextTick(() => {
      // 获取用户信息
      this.getUserInfo()

      // 监听删除视频事件后刷新列表
      this.$bus.$on('DeleteVideoSuccess', this.ReloadVideoList)
      this.$bus.$on('ReloadVideoList', this.ReloadVideoList)
    })
  },
  beforeDestroy() {
    this.$bus.$off('DeleteVideoSuccess', this.ReloadVideoList)
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      this.$store.dispatch('user/GetUserInfo').then(() => {
        this.userInfo = this.$store.state.user.userInfo
        // 获取视频列表
        this.getVideoList()
      })
    },
    // 获取视频列表
    async getVideoList() {
      const { userInfo, limit, page } = this
      const res = await this.$API.video.getVideoByAuthorId(
        this.userInfo.id,
        limit,
        page
      )
      if (!res.data) {
        if (this.page != 1) {
          this.page--
          this.getVideoList()
        } else {
          return (this.videoList = [])
        }
      }

      if (res.status == 200) {
        this.videoList = res.data.payload
      }
    },
    // 刷新视频列表
    ReloadVideoList() {
      this.getVideoList()
      // 重新获得用户列表
      this.$store.dispatch('user/GetUserInfo')
    },
    // 页数变化
    pageChange(page) {
      // console.log(page)
      this.page = page
      this.getVideoList()
    }
  }
}
</script>

<style scoped>
.videoManage-content {
  margin-top: 20px;
}
.videoManage {
  margin-bottom: 20px;
}
</style>
